<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>资产统计</title>
    <link rel="stylesheet" href="../css/default.css" />
    <link rel="stylesheet" href="../css/assets-statistics.css" />
  </head>
  <body>
    <div class="assets-statistics" id="app">
      <!-- 导航部分 -->
      <div class="nav">
        <h5 class="public-title">资产统计</h5>
        <ul class="item-box clearfix">
          <li class="f-l item">
            <img
              class="dp-inb icon"
              src="../images/index/assets.png"
              width="32"
              height="32"
              alt=""
            />
            <div class="dp-inb">
              <h4 class="count">300处</h4>
              <p class="text">总资产</p>
            </div>
          </li>
          <li class="f-l item">
            <img
              class="dp-inb icon"
              src="../images/index/area.png"
              width="32"
              height="32"
              alt=""
            />
            <div class="dp-inb">
              <h4 class="count">12000㎡</h4>
              <p class="text">资产总面积</p>
            </div>
          </li>
          <li class="f-l item">
            <img
              class="dp-inb icon"
              src="../images/index/money.png"
              width="32"
              height="32"
              alt=""
            />
            <div class="dp-inb">
              <h4 class="count">12000万</h4>
              <p class="text">总金额</p>
            </div>
          </li>
        </ul>
      </div>
      <!-- end -->

      <!-- 自营资产部分 -->
      <div class="self-support clearfix">
        <!-- 左边 -->
        <div class="left  f-l">
          <p class="title">自营资产数量</p>
          <div class="clearfix">
            <div class="bg-img bg-img-1 f-l">
              <img
                class="icon"
                src="../images/index/left-icon.png"
                width="48"
                height="30"
                alt=""
              />
              <div class="bg-content">
                <h3 class="bg-title">50处</h3>
                <p class="bg-text">自营资产数量</p>
              </div>
            </div>
            <div class="bg-img bg-img-2 f-l">
              <div class="bg-content">
                <h3 class="bg-title">150处</h3>
                <p class="bg-text">监管资产</p>
              </div>
            </div>
          </div>
          <div
            class="char"
            id="self-left"
            style="width: 100%;height:300px;"
          ></div>
          <!-- <img class="chart" src="../images/index/histogram-1.png" alt="" /> -->
        </div>
        <!-- 右边 -->
        <div class="right  f-l">
          <p class="title">资产占比</p>
          <div class="clearfix">
            <div class="bg-img bg-img-1 f-l">
              <img
                class="icon"
                src="../images/index/right-icon.png"
                width="54"
                height="54"
                alt=""
              />
              <div class="bg-content">
                <h3 class="bg-title">300㎡</h3>
                <p class="bg-text">自营面积</p>
              </div>
            </div>
            <div class="bg-img bg-img-2 f-l">
              <img
                class="icon"
                src="../images/index/right-icon.png"
                width="54"
                height="54"
                alt=""
              />
              <div class="bg-content">
                <h3 class="bg-title">150㎡</h3>
                <p class="bg-text">监管面积</p>
              </div>
            </div>
          </div>
          <div
            class="char"
            id="self-right"
            style="width: 100%;height:300px;"
          ></div>
          <!-- <img class="chart" src="../images/index/pie-charts.png" alt="" /> -->
        </div>
      </div>
      <!-- end -->

      <!-- 各公司资产经营情况 -->
      <div class="company ">
        <h5 class="public-title">各公司资产经营情况</h5>
        <div class="content clearfix">
          <ul class="menu f-l">
            <li
              class="li have-child"
              v-for="(item, index) in menu"
              :key="index"
            >
              <div
                class="hand "
                :class="item.child?'child':null"
                @click="showMenu1Ckick(index, item)"
              >
                <span class="square" v-if="item.child"></span> {{ item.text }}
              </div>
              <div
                class="two"
                v-for="(child1, index1) in item.child"
                v-if="item.child"
                v-show="item.show"
              >
                <div
                  class=" hand"
                  :class="child1.child?'child':null"
                  @click="showMenu2Ckick(index1, child1)"
                >
                  <span class="square"></span>{{ child1.text }}
                </div>
                <div class="two" v-if="child1.child" v-show="child1.show">
                  <div class="hand" v-for="(child2, index2) in child1.child">
                    {{ child2 }}
                  </div>
                </div>
              </div>
            </li>
            <li class="li">市国资公司</li>
            <li class="li">市国资公司</li>
            <li class="li">市国资公司</li>
            <li class="li">市国资公司</li>
            <li class="li">市国资公司</li>
            <li class="li">市国资公司</li>
          </ul>
          <div class="histogram f-l">
            <h5 class="title f-l">市国资公司租赁情况</h5>
            <div class="describe f-r">
              <img
                class="dp-inb"
                src="../images/index/company-money.png"
                width="32"
                height="32"
                alt=""
              />
              <div class="dp-inb h5-title-box">
                <h5 class="h5-title">300处</h5>
                <p class="text">总资产</p>
              </div>
            </div>
            <div class="chart">
              <img src="../images/index/histogram-2.png" width="100%" alt="" />
            </div>
          </div>
          <div class="pie-chart f-r">
            <h5 class="title f-l">市国资公司租赁情况</h5>
            <div class="describe f-r">
              <img
                class="dp-inb"
                src="../images/index/company-area.png"
                width="32"
                height="32"
                alt=""
              />
              <div class="dp-inb h5-title-box">
                <h5 class="h5-title">300处</h5>
                <p class="text">总资产</p>
              </div>
            </div>
            <img class="chart" src="../images/index/pie-charts.png" alt="" />
          </div>
        </div>
      </div>
      <!-- end -->

      <!-- 表格部分 -->
      <div class="table-content">
        <h5 class="public-title">待办任务事项</h5>
        <div class="table-box">
          <table class="table">
            <thead>
              <td>类型</td>
              <td>标题</td>
              <td>采购商</td>
              <td>时间</td>
              <td>操作</td>
            </thead>
            <tr>
              <td>国资委催租事宜</td>
              <td>国资委催租事宜</td>
              <td>吴小莉</td>
              <td>2018-05-22</td>
              <td><div class="deal dp-inb">处理</div></td>
            </tr>
            <tr>
              <td>国资委催租事宜</td>
              <td>国资委催租事宜</td>
              <td>吴小莉</td>
              <td>2018-05-22</td>
              <td><div class="deal dp-inb">处理</div></td>
            </tr>
            <tr>
              <td>国资委催租事宜</td>
              <td>国资委催租事宜</td>
              <td>吴小莉</td>
              <td>2018-05-22</td>
              <td><div class="deal dp-inb">处理</div></td>
            </tr>
            <tr>
              <td>国资委催租事宜</td>
              <td>国资委催租事宜</td>
              <td>吴小莉</td>
              <td>2018-05-22</td>
              <td><div class="deal dp-inb">处理</div></td>
            </tr>
          </table>
        </div>
      </div>

      <!-- en'd -->
    </div>
    <!--  -->
    <script src="../js/lib/vue/vue.min.js"></script>
    <script src="../js/lib/echarts/index.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          menu: [
            {
              text: "市国资公司",
              show: false,
              child: [
                {
                  text: "市国资公司",
                  show: false,
                  child: ["市国资公司", "市国资公司", "市国资公司"]
                },
                {
                  text: "市国资公司",
                  show: false,
                  child: ["市国资公司", "市国资公司", "市国资公司"]
                },
                {
                  text: "市国资公司"
                }
              ]
            },
            {
              text: "市国资公司",
              show: false,
              child: [
                {
                  text: "市国资公司",
                  show: false,
                  child: ["市国资公司", "市国资公司", "市国资公司"]
                },
                {
                  text: "市国资公司",
                  show: false,
                  child: ["市国资公司", "市国资公司", "市国资公司"]
                },
                {
                  text: "市国资公司",
                  show: false
                }
              ]
            }
          ]
        },

        created: function() {
          setTimeout(function() {
            // 基于准备好的dom，初始化echarts实例
            // 自营柱状图
            (function() {
              var selfLeft = echarts.init(document.getElementById("self-left"));
              var dataShadow = [];
              var data = [1500, 2000, 3600, 1000, 1000, 2000];
              var maxNumber = Math.max.apply(null, data);
              maxNumber += 500;
              for (var i = 0; i < data.length; i++) {
                dataShadow.push(maxNumber);
              }
              // 指定图表的配置项和数据
              var selfLeftOption = {
                title: {
                  // text: "ECharts 入门示例"
                },
                tooltip: {},
                legend: {
                  // data: ["销量"]
                },
                xAxis: {
                  data: [
                    {
                      value: "招租"
                    },
                    "已租",
                    "待租",
                    "临租",
                    "待拆",
                    "拆除调出资产"
                  ],

                  type: "category",
                  //data: ['2015-2016', '2016-2017', '2017-2018', '2018-2019']
                  axisLabel: {
                    interval: 0, //强制文字产生间隔
                    rotate: 0, //文字逆时针旋转45°
                    textStyle: {
                      //文字样式
                      color: "gray",
                      fontSize: 14,
                      fontFamily: "Microsoft YaHei"
                    }
                  }
                },
                yAxis: {
                  max: maxNumber
                },
                series: [
                  {
                    type: "bar",
                    barWidth: 18,
                    itemStyle: {
                      color: "#f4f4f4",
                      barBorderRadius: [6, 6, 0, 0]
                    },
                    barGap: "-100%",
                    data: dataShadow,
                    animation: false
                  },
                  {
                    // name: "销量",
                    type: "bar",
                    barWidth: 18,
                    data: data,
                    itemStyle: {
                      barBorderRadius: [6, 6, 0, 0],
                      //这里是重点
                      color: function(params, a) {
                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = [
                          "#009aed",
                          "#ff8e72",
                          "#6656da",
                          "#009aed",
                          "#ff8e72",
                          "#6656da",

                          "#00c9f8",
                          "#e96240",
                          "#7e6dff",
                          "#00c9f8",
                          "#e96240",
                          "#7e6dff"
                        ];
                        // return colorList[params.dataIndex];
                        // console.log(colorList[params.dataIndex]);
                        var c0 = colorList[params.dataIndex];
                        var c1 = colorList[params.dataIndex + 6];
                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: c0
                          },
                          {
                            offset: 1,
                            color: c1
                          }
                        ]);
                      }
                    }
                  }
                ]
              };
              // 使用刚指定的配置项和数据显示图表。
              selfLeft.setOption(selfLeftOption);
            })();
            // end

            // 自营饼状图
            (function() {
              var selfRight = echarts.init(
                document.getElementById("self-right")
              );
              var data = [
                { value: 335, name: "已租" },
                { value: 310, name: "招租" },
                { value: 234, name: "待租" },
                { value: 135, name: "临租" },
                { value: 158, name: "待拆" },
                { value: 135, name: "拆除调出资产" }
              ];
              var allCount = 0;
              var percent = 0;
              data.forEach(function(i) {
                allCount += i.value;
              });

              // app.title = "环形图";
              var selfRightOption = {
                tooltip: {
                  trigger: "item",
                  formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                  orient: "vertical",
                  // x: "right",
                  y: "center",
                  right: "10%",
                  itemHeight: 12,
                  itemWidth: 12,
                  itemGap: 18,
                  formatter: function(name) {
                    var i = data[percent].value / allCount;
                    percent++;
                    return name + "    " + (i * 100 + "").substr(0, 4) + "%";
                  }
                },

                series: [
                  {
                    name: "资产占比",
                    type: "pie",
                    radius: ["50%", "70%"],
                    center: ["25%", "50%"],
                    avoidLabelOverlap: false,
                    label: {
                      normal: {
                        show: false,
                        position: "left"
                      },
                      emphasis: {
                        show: true,
                        textStyle: {
                          fontSize: "16",
                          fontWeight: "bold"
                        }
                      }
                    },
                    labelLine: {
                      normal: {
                        show: false
                      }
                    },
                    data: data,
                    itemStyle: {
                      color: function(params, a) {
                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = [
                          "#ff0000",
                          "#3ab795",
                          "#ea4d44",
                          "#f4c736",
                          "#0093ec",
                          "#ff6085"
                        ];
                        return colorList[params.dataIndex];
                        // return colorList[params.dataIndex];
                        // console.log(colorList[params.dataIndex]);
                      }
                    }
                  }
                ]
              };
              selfRight.setOption(selfRightOption);
            })();
            //
            //
          }, 20);
        },

        methods: {
          // 显示一级菜单
          showMenu1Ckick: function(index, child) {
            if (!child.child) return;
            child.show = !child.show;
          },
          // 显示二级菜单
          showMenu2Ckick: function(index, child) {
            if (!child.child) return;
            child.show = !child.show;
          }
        }
      });
    </script>
  </body>
</html>
